<template>
  <div class="peiChart" ref="chartDom"></div>
</template>
<script setup>
import { reactive, onMounted, watch, ref, toRaw } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  sourceData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const chartDom = ref(null)
let myChart
const echartsInit = () => {
  myChart = echarts.init(chartDom.value)
}
const echartsetOption = (param) => {
  let option = {
    backgroundColor: '',
    title: {
      text: param.value[0],
      textStyle: {
        color: param.color,
        fontSize: 25
      },
      itemGap: 20,
      left: 'center',
      top: 'center'
    },
    graphic: [
      {
        type: 'text',
        z: 100,
        left: 'center',
        top: '86%',
        style: {
          fill: '#fff',
          text: param.label + (param.uint || ''),
          // text: [
          //     '横轴表示温度，单位是°C',
          //     '纵轴表示高度，单位是km',
          //     '右上角有一个图片做的水印',
          //     '这个文本块可以放在图中各',
          //     '种位置'
          // ].join('\n'),
          font: '20px Microsoft YaHei'
        }
      }
    ],
    tooltip: {
      formatter: function (params) {
        return '<span style="color: #fff;">占比：' + params.value + '%</span>'
      }
    },
    angleAxis: {
      max: 100,
      clockwise: false, // 逆时针
      // 隐藏刻度线
      show: false,
      startAngle: 110
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    polar: [
      {
        center: ['50%', '50%'], //中心点位置
        radius: '98%' //图形大小
      }
    ],
    series: [
      {
        name: '小环',
        type: 'gauge',
        startAngle: 0,
        endAngle: 360,
        radius: '95%',
        center: ['50%', '50%'],
        splitNumber: 10,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        progress: {
          show: false
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: param.color,
            width: 2,
            shadowBlur: 1,
            shadowColor: param.color
          },
          length: 10
        }
      },
      {
        type: 'bar',
        z: 10,
        data: param.value,
        showBackground: false,
        backgroundStyle: {
          color: param.color,
          borderWidth: 40,
          width: 10,
          borderRadius: [0, 0, 0, 0]
        },
        coordinateSystem: 'polar',
        roundCap: false,
        barWidth: 10,
        itemStyle: {
          normal: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: param.color
              },
              {
                offset: 1,
                color: param.color
              }
            ]),
            shadowBlur: 5,
            shadowColor: '#2A95F9'
          }
        }
      },
      {
        type: 'pie',
        name: '内层细圆环',
        radius: ['51%', '48%'],
        // radius: ['41%', '38%'],
        startAngle: 110,
        hoverAnimation: false,
        clockWise: true,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: param.color
              },
              {
                offset: 1,
                color: param.color
              }
            ])
          }
        },
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        data: [100]
      }
    ]
  }
  if (myChart) {
    myChart.setOption(option)
  }
}

onMounted(() => {
  echartsInit()
  echartsetOption(props.sourceData)
})
</script>

<style lang="scss" scoped>
.peiChart {
  width: 100%;
  height: 100%;
}
</style>
